<template>
	<view class="container">
		<!-- 用户信息 -->
		<view class="user-info">
			<div class="active-a">
				<div class="active-b">
					<image class="avatar" :src="infoList[0].imgpath"></image>
					<text class="name">{{infoList[0].name}}</text>
				</div>
				<div class="active-c">
					<div class="rating">{{infoList[0].star}}星</div>
				</div>
			</div>
		</view>

		<!-- 可预约时间段 -->
		<div class="time-slots-a">
			<scroll-view scroll-x="true" class="scroll-view-navbar">
				<view class="slot" v-for="notice in notices" :key="notice.id"
					:class="{ 'active': notice.id === currentNavItem }" @click="selectSlot(notice.id)">
					<view>{{notice.weekDay}}</view>
					<view>{{notice.monthDay}}</view>
					<view class="status">{{notice.type}}</view>
				</view>
			</scroll-view>
			<div style="margin-top: 50px;font-size: 17px;font-weight: bold;">请选择时段</div>
		</div>
		<view class="time-slots-b">
			<view class="slots" v-for="notices in noticess" :key="notices.id" :class="[{ 
				'actives': notices.type === currentNavItems },{ 
				'activeo': notices.id === currentNavItemo }]" @click="selectSlots(notices.type,notices.id)" disabled>
				<div>{{notices.date}}</div>
				<div class="status">{{notices.type}}</div>

			</view>
		</view>
		<!-- 预约按钮 -->
		<view class="appointment-button" @click="makeAppointment">
			去预约
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	}
	from '@dcloudio/uni-app';
	import {
		getbyid,
		getdate,
		gettien
	} from '@/request/api.js'

	const currentNavItem = ref(null);
	const currentNavItems = ref("预约已满");
	const currentNavItemo = ref(null);
	const infoList = ref([]);
	const notices = ref([]);
	const noticess = ref([]);
	const id = ref('');

	//显示时间或家政信息
	onLoad(async (e) => {
		id.value = e.id;
		console.log("id", e);
		// console.log("id", id.value);
		try {
			const data = {
				'id': id.value
			};
			//获取家政信息
			const response = await getbyid(data);
			infoList.value = [response.data.data];
			// 获取时间
			const req = await getdate(data);
			console.log("req", req);

			// 假设req.data.data是一个数组，我们需要遍历这个数组
			req.data.data.forEach(item => {
				if (item && typeof item.date === 'number') {
					const timestamp = item.date;
					const formattedDate = formatTimestamp(timestamp, item.id);
					notices.value.push(formattedDate);
				}
			});
			//默认查询第一个日期的时间段
			const datas = {
				'id': req.data.data[0].id
			}
			const reql = await gettien(datas)
			show(reql)
		} catch (error) {
			console.error("请求失败:", error);
		}
	});


	function formatTimestamp(timestamp, id) {
		let date = new Date(timestamp);
		let year = date.getFullYear();
		let month = (date.getMonth() + 1).toString().padStart(2, '0');
		let day = date.getDate().toString().padStart(2, '0');
		let weekDay = date.getDay();
		let weekDays = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
		let weekDayText = weekDays[weekDay];

		return {
			monthDay: `${month}-${day}`,
			id: id,
			weekDay: weekDayText,
			type: '可约' // 默认类型，可以根据实际情况调整
		};
	}
	//跳转填写预约资料页面
	function makeAppointment() {
		// console.log("sdateid", currentNavItem.value);
		// console.log("stimeid", currentNavItemo.value);
		// console.log("sid", id.value);
		if (currentNavItem.value === null || currentNavItemo.value === null) {
			console.log("sdateorstime为空")
			return
		}
		// console.log("ok");
		uni.navigateTo({
			url: `/pages/user/details/register?sid=${id.value}&sdateid=${currentNavItem.value}&stimeid=${currentNavItemo.value}`
		})
	}
	//点击日期
	async function selectSlot(id) {
		console.log(id);
		currentNavItem.value = id;
		currentNavItemo.value = null;
		const datas = {
			'id': id
		}
		const reql = await gettien(datas)
		console.log("reql", reql);
		show(reql)
	}

	function selectSlots(type, id) {
		console.log(type + id);
		if (type === "预约已满") {
			currentNavItemo.value = null;
		} else {
			currentNavItemo.value = id;
		}
	}

	//添加
	function show(reql) {
		// 假设reql.data.data是一个数组，我们需要将其赋值给noticess
		if (reql && Array.isArray(reql.data.data)) {
			noticess.value = reql.data.data.map(item => {
				// console.log(item)
				return {
					id: item.id,
					date: item.time,
					type: item.istrue === "0" ? '可约' : '预约已满'
				};
			});
		}
	}
</script>

<style>
	.scroll-view-navbar {
		white-space: nowrap;
	}

	.active-a {
		align-items: center;
		justify-content: space-between;
		display: flex;
		color: #000;
	}

	.active-b,
	.active-c {
		display: flex;
		align-items: center;
	}

	.container {
		/* padding: 20px; */
	}

	.user-info {
		padding: 25px;
		border-bottom: 12px solid #f2f2f2ff;
	}

	.avatar {
		width: 50px;
		height: 50px;
		border-radius: 8px;
		margin-right: 15px;
		box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.3);
	}

	.name {
		font-size: 18px;
		font-weight: bold;
	}

	.rating {
		background-color: #9b42fd;
		color: white;
		padding: 3px 12px;
		clip-path: inset(0 round 0 8px 0 8px);
		box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.3);
	}

	.time-slots-a,
	.time-slots-b {
		padding: 15px;
	}

	.time-slots-a {
		border-bottom: 2px solid #f3f3f3;
	}

	.time-slots-div {
		display: flex;
	}

	.slot {
		font-size: 14px;
		display: inline-block;
		margin-right: 10px;
		text-align: center;
		border: 1px solid #ddd;
		padding: 10px;
		border-radius: 8px;
		width: 45px;
		height: 75px;
	}

	.slot view {
		margin-top: 1px;
	}

	.slot view:last-child {
		margin-top: 14px;
	}

	.slot.active {
		border: 1px blue solid;
		font-weight: bold;
	}

	.slots {
		display: inline-block;
		margin-right: 10px;
		text-align: center;
		border: 1px solid #ddd;
		font-size: 14px;
		border-radius: 6px;
		padding: 12px 0px;
		width: 120px;
		height: auto;
	}

	.slots.actives {
		color: gray;
		background-color: #fcfcfc;
	}

	.slots.activeo {
		color: white;
		background-color: #6f79fe;
	}

	.slots disabled {
		color: #999;
		cursor: not-allowed;
	}

	.status {
		font-size: 13px;
	}

	.appointment-button {
		position: fixed;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		width: 200px;
		padding: 10px;
		background-color: #7B61FF;
		color: white;
		text-align: center;
		border-radius: 5px;
	}
</style>